<template>
  <a-modal
    title="医生二维码"
    :width="600"
    :visible.sync="visible"
    :body-style="{'padding-top': '20px', paddingBottom: '80px' }"
    @cancel="close"
    :footer="null"
  >
    <img :src="qrcode" class="h-full w-auto mx-auto" />

    <div
      class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center"
    >
      <a-button class="w-[400px]" v-copy :data-clipboard-text="qrcode">复制二维码链接</a-button>
    </div>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      env: process.env.VUE_APP_BASE_API,
      visible: false,
      qrcode: '',
    }
  },
  mounted() {},
  methods: {
    /**
     *
     * @param {*} data 数据
     */
    async open(qrcode) {
      this.visible = true
      this.qrcode = `${this.$store.getters.baseUrl}${qrcode}`
    },
    firstCopySuccess(e) {
      console.log('copy arguments e:', e)
      alert('复制成功!')
    },
    firstCopyError(e) {
      console.log('copy arguments e:', e)
      alert('复制失败!')
    },
    close() {
      this.visible = false
      this.form.resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
.shadow {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
</style>